<template>
	<view>
		<view class="tishi-box">
			<u-icon name="info-circle" color="#FF7A21"></u-icon>
			<span class="tishi-text">注意: 请确认本单位疗休养账户已完成申请</span>
		</view>
		
		<view class="tishi-box-err">
			<view class="header">
				<u-icon name="close-circle-fill" color="#D40220"></u-icon>
				<span class="tishi-text">审核驳回</span>
			</view>
			<view class="text">抱歉，您申请的个人疗休养信息申请未通过，请重新修改后提交。</view>
			<view class="text">驳回原因:我是驳回原因，我是驳回原因，我是驳回原因，我是驳回原因，我是驳回原因。</view>
		</view>
		
		
		{{JSON.stringify(formData)}}
		<base-form :formColumn="formColumn" v-model="formData" :rules="rules" ref="form">
			<template #telBtton>
				<view class="tel-btn" @click="getCode">
					{{codeName}}
				</view>
			</template>
		</base-form>
		
		<view class="btn-box">
			<u-button text="提交" shape="circle" type="primary" color="linear-gradient(to right, #93DCB4, #5CB87F)"
			 @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formColumn:[

					{
						label:'单位邀请码',
						key:'company_code',
						type:'text',
						required:true,
						placeholder:'请输入单位邀请码'
					},
					{
						label:'单位名称',
						key:'company_name',
						type:'text',
						disabled:true,
						required:true,
						placeholder:'请输入单位名称',
					},
					{
						label:'部门',
						key:'department',
						type:'text',
						required:true,
						placeholder:'请输入部门',
					},
					{
						label:'姓名',
						key:'name',
						type:'text',
						required:true,
						placeholder:'请输入姓名',
					},
					{
						label:'性别',
						key:'sex',
						type:'select',
						required:true,
						placeholder:'请选择性别',
						list: [
							[{
								label: '男',
								// 其他属性值
								id: '1'
							}, {
								label: '女',
								id: '2'
							}]
						],
						keyName:'label'
					},
					{
						label:'身份证号',
						key:'id_no',
						type:'text',
						required:true,
						placeholder:'请输入身份证号',
					},
					{
						label:'手机号',
						key:'mobile',
						type:'text',
						required:true,
						slot:'telBtton',
						placeholder:'请输入手机号',
					},
					{
						label:'验证码',
						key:'check_code',
						type:'text',
						required:true,
						placeholder:'请输入验证码',
					},
					{
						label:'疗休养类型',
						key:'type',
						type:'select',
						required:true,
						placeholder:'请选择疗休养类型',
						list: [
							[{
								label: '区内',
								// 其他属性值
								id: '1'
							}, {
								label: '市内',
								id: '2'
							}, {
								label: '对口支援单位',
								id: '3'
							}, {
								label: '省内',
								id: '4'
							}]
						],
						keyName:'label'
					},
					
					
				],
				formData:{
					company_code:'',
					company_id:'',
					company_name:'',
					department:'开拓部',
					name:'晨晨',
					sex:'',
					id_no:'342601199809135613',
					mobile:'15256990662',
					check_code:'123456',
					type:'',
				},
				rules:{
					'company_code': {
						type: 'string',
						required: true,
						asyncValidator: (rule, value, callback) => {
							if(!this.canSearchCompany) return
							if(!value){
								this.formData.company_id = ''
								this.formData.company_name = ''
								callback(new Error('请输入单位邀请码'));
							}else{
								if(value == 123){
									this.formData.company_id = 123
									this.formData.company_name = '时科'
									this.canSearchCompany = false
									callback();
								}
								// uni.$u.debounce( async ()=>{
								// 	const res = await reportService.shortinfo(value)
								// 	if(!res.success){
								// 		uni.$u.toast('请输入正确的邀请码');
								// 		this.formData.company_id = ''
								// 		this.formData.company_name = ''
								// 		callback(new Error('请输入正确的邀请码'));
								// 	}else{
								// 		this.formData.company_id = res.data.company_id
								// 		this.formData.company_name = res.data.company_name
								// 		callback();
								// 	}
								// }, 1000)
							}
						},
						trigger: ['blur', 'change']
					},
					'company_name': {
						type: 'string',
						required: true,
						message: '请输入单位名称',
						trigger: ['blur', 'change']
					},
					'department': {
						type: 'string',
						required: true,
						message: '请输入部门',
						trigger: ['blur', 'change']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'sex': {
						type: 'string',
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					},
					'id_no': {
						type: 'string',
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					},
					'mobile': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'check_code': {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
					'type': {
						type: 'string',
						required: true,
						message: '请选疗休养类型',
						trigger: ['blur', 'change']
					},
					
				},
				
				isSend: false,  //禁用
				codeName: "获取验证码",
				totalTime: 10, //一般是60
				timer:'', //定时器
				
				canSearchCompany:true, // 防止每次表单验证都查询一次企业
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form.setRules(this.rules)
		},
		async onLoad() {

		},
		watch:{
			'formData.company_code': {
				async handler (newName,oldName) {
					if(newName || oldName){
						this.canSearchCompany = true		
					}
				},
				immediate: false,
				deep:true,
			}, 	
		},
		methods: {
			async submit(){
				const res = await this.$refs['form'].validate()
				console.log(res)
			},
			async getCode(){
				if(!this.formData.mobile){
					uni.$u.toast('请输入手机号');
					return
				}
				if (this.isSend){
					uni.$u.toast('倒计时结束后再发送');
					return
				}
				console.log('获取验证码')
				// await loginService.code({mobile:this.formData.mobile,type:2})// 获取验证码的接口
				
				this.isSend = true
				this.codeName = this.totalTime + 's后重新发送'
				this.timer = setInterval(() => {
				   this.totalTime--
				   this.codeName = this.totalTime + 's后重新发送'
				   if (this.totalTime < 1) {
				   clearInterval(this.timer)
				   this.codeName = '获取验证码'
				   this.totalTime = 10
				   this.isSend = false 
				   }
				}, 1000)
					
			},
		}
	}
</script>

<style lang="less">
	.tishi-box{
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
		background-color: #FFF2E2;
		.tishi-text{
			margin-left: 10rpx;
			font-size: 30rpx;
			color: #666666
		}
	}
	.tishi-box-err{
		padding: 40rpx 30rpx;
		background-color: #FFF2E2;
		.tishi-text{
			margin-left: 10rpx;
			font-size: 30rpx;
			color: #D40220
		}
		.header{
			display: flex;
			align-items: center;
		}
		.text{
			margin-left: 42rpx;
			margin-top: 10rpx;
			font-size: 30rpx;
			color: #666666
		}
	}
	page{
		background-color: #F4F4F4;
	}
	.tel-btn{
		color: #61BA83;
	}
	.btn-box{
		margin-top: 80rpx;
		padding: 40rpx;
	}
</style>
